const path = require("path");//nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

function getStyleLoaders(pre) {
  return [
    MiniCssExtractPlugin.loader,
    // 执行顺序，从右到左(从下到上)
    'css-loader', //将css资源编译成commonjs的模块到js中
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-preset-env',
            ],
          ],
        },
      },
    },
    pre
  ].filter(Boolean) //array.filter(Boolean)：过滤假数据（false,0,-0."",null,undefined,NaN）
}


module.exports = {
  // 入口
  entry: "./src/main.js",
  // 输出
  output: {
    // 文件的输出路径
    path: path.resolve(__dirname, "../dist"),
    // 文件名
    filename: "static/js/main.js",
    // 自动清空上次打包的内容
    clean: true,
  },
  // 加载器
  module: {
    rules: [
      {
        // 匹配到一个loader后，不会再向下匹配
        // 减少编译时间
        oneOf: [
          // loader的配置
          {
            test: /\.css$/, //只检测.css文件
            use: getStyleLoaders(),
          },
          {
            test: /\.less$/, //只检测.less文件
            use: getStyleLoaders("less-loader"),
          },
          {
            test: /\.s[ac]ss$/, //只检测.less文件
            use: getStyleLoaders("sass-loader"),
          },
          // 将小于6kb的图片转为data URL(base64编码)，大于的不转，减少连接
          // 默认8kb，通过parser.dataUrlCondition.maxSize自定义
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              // 将小于4kb的文件转化为base64的url
              dataUrlCondition: {
                maxSize: 6 * 1024 // 6kb
              }
            },
            generator: {
              // :10 hash值保留10位
              filename: 'static/images/[hash:10][ext][query]'
            }
          },
          {
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
            type: 'asset/resource',
            generator: {
              // :10 hash值保留10位
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, //排除node_modules,不进行转化
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            }
          }
        ]
      }
    ],
  },
  // 插件
  plugins: [
    // eslint插件配置，plugin使用new
    new ESLintPlugin({
      // eslint检测文件的位置
      context: path.resolve(__dirname, './src'),
      exclude: "node_modules", // 默认值
      cache: true,//开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    new CssMinimizerPlugin()
  ],
  // 模式
  mode: "production",
  devtool: "source-map"
}
